<template>
  <div class="card">
    <div class="card-image">
      <figure class="image-background">
        <img src="@/assets/backgrounds/sheep.png">
      </figure>
    </div>
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img src="@/assets/backgrounds/sheep.png">
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">John Smith</p>
          <p class="subtitle is-6">@johnsmith</p>
        </div>
      </div>

      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
        <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <section style="margin-top: 30px">
      <b-tabs v-model="activeTab">
        <b-tab-item label="帖子">
          Lorem ipsum dolor sit amet.
        </b-tab-item>
        <b-tab-item label="相册">
          Lorem ipsum dolor sit amet.
        </b-tab-item>

        <b-tab-item label="视频">
          Lorem <br>
          ipsum <br>
          dolor <br>
          sit <br>
          amet.
        </b-tab-item>
      </b-tabs>
    </section>
  </div>
</template>

<script>
export default {
  name: 'InfoMiddleContent'
}
</script>

<style scoped>
.card{
  margin-left: 50px;
  max-height: 450px;
}
.image-background{
  max-width: 300px;
  max-height: 260px;
}

</style>
